WEBR SETUP
LEAFLET JS
lat = station.map(({Latitude:actualValue})=>actualValue); //need to turn data into array (list of numbers to display on y-axis)
long = station.map(({Longitude:actualValue})=>actualValue); //list of dates for x axis
names = station.map(({Name:actualValue})=>actualValue);function makeArray(sitearray) { //makeArray is a function
let sets = [];
for (let s = 0; s <= 25; s ++) { //loops through the length of "names" to make sets
let pairs = [];
pairs[0] = sitearray[s];
pairs[1] = lat[s]
pairs[2] = long[s];
sets[s] = pairs
};
return sets;
}
list_of_pairs = [makeArray(names)][0]; //list of pairs is now an ARRAY of arrays, which will be used to make markers.
// Thanks to https://blog.webnersolutions.com/javascript-how-to-lighten-a-color-by-some-percentage/
function determineColor(siteID) {
const allvals = filtered.map(({Value:actualValue})=>actualValue);
const thissite = filtered.filter(function(waterFilter) {
return siteID.includes(waterFilter.Name);// &&
//mymonth.includes(waterFilter.Month) &&
//year.includes(waterFilter.Year);
})
const vals = thissite.map(({Value:actualValue})=>actualValue);
const sum = vals.reduce((a, b) => a + b, 0);
const ave = (sum / vals.length) || 0;
const perc = 100-((ave - Math.min.apply(Math, allvals))/ (Math.max.apply(Math, allvals)-Math.min.apply(Math, allvals)))*100;
var color = "#23362d"
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (perc**2) / 100);
G = parseInt(G * (perc**2) / 100);
B = parseInt(B * (perc**2) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
var return_color = "#"+RR+GG+BB;
//return(color)
return(return_color)
}// Makes markers
markers = {
var markers = {};
for (var i = 0; i <= 25; i++) { //need to replace 74 but putting a variable length here breaks it so I am afraid to.
let id_name = [list_of_pairs[i][0]];
//This is in case inputs are selected when map is loaded.
//Untested: might break.
// function determineIcon(input) {
// if (results.includes(input)) {
// return waterIcon2
// } else {
//return waterIcon
//}
// }
//shorthand for this i
let name_id = list_of_pairs[i][0]
markers[name_id] = new L.circleMarker(
[list_of_pairs[i][1], list_of_pairs[i][2]],
{options:
{Name: list_of_pairs[i][0]}, //this is necessary
id: list_of_pairs[i][0],
color: determineColor(list_of_pairs[i][0])
}) //also this
//Add event listeners
// .on('mouseover', highlightFeature)
// .on('mouseout', resetHighlight)
// .on('click', toggleFeature)
.bindPopup(list_of_pairs[i][0])
.addTo(glknParks);
//This part allows markers to be called by checkbox inputs by creating an object
//Where the key is the site name and the value is the marker.
markers[name_id].properties = {};
markers[name_id].properties.Name = list_of_pairs[i][0];
} //for loop close
return markers;
}//Initiate leaflet map
L = {
const L = await require("leaflet/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L; //to call leaflet, use "L" (ie L.marker)
};//Add tiles to the map.
//Currently using openstreetmap b/c it doesn't have the loading issue that stamen does.
glknParks = {
let map = L.map(container);
var lidarBase = L.tileLayer.wms(
'https://elevation.nationalmap.gov/arcgis/services/3DEPElevation/ImageServer/WMSServer?',
{
layers: '3DEPElevation:Hillshade Gray',
className: 'lidarBase',
attribution: 'U.S. Geological Survey National Map - 3D Elevation Program Lidar'
}
);
var OpenStreetMap_Mapnik = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.control.layers(
{
"Open Street Map": OpenStreetMap_Mapnik,
"LiDAR": lidarBase
},
null,
{position: 'topleft'}
).addTo(map);
L.control.scale().addTo(map);
//setView is my best estimation but should be fiddled with later
map.setView([44.8, -90], 7);
return map;
};viewof varname = Inputs.select(
data.map(d => d.Variable),
{label: "Variable:", unique: true, sort: true, multiple: false, value: "pH"}
)
viewof year = Inputs.select(
data.map(d => d.Year),
{label: "Year:", unique: true, sort: true, multiple: false, value: 2019}
)
viewof mymonth = Inputs.select(
data.map(d => d.Month),
{label: "Month:", unique: true, sort: true, multiple: false, value: 5}
)
viewof toggle_boxplot = Inputs.toggle({label: "Boxplot by Year", value: true})filtered = data.filter(function(waterFilter) {
return varname.includes(waterFilter.Variable);// &&
//mymonth.includes(waterFilter.Month) &&
//year.includes(waterFilter.Year);
})Plotly = require("https://cdn.plot.ly/plotly-2.16.1.min.js")
// Function to make boxplots
function box_Plot(var_name) {
let thisvar = var_name;
if (typeof thisvar !== "undefined") { //make sure it is not undefined to avoid errors
let holder = []
for (let i = 0; i <= names.length; i ++) { //names defined in list_of_pairs chunk
let thissite = names[i];
if (typeof thissite !== "undefined") {
let df = filtered.filter(function(tracefilter){
return thissite.includes(tracefilter.Name);
})
let eachvar_y =
df.map(({Value:actualValue})=>actualValue);
function get_x(toggle_boxplot) {
if (toggle_boxplot == true) {
return df.map(({Year:actualValue})=>actualValue);
} else {
return df.map(({Month:actualValue})=>actualValue);
}
}
let eachtrace = {
y: eachvar_y,
// x: get_x(toggle_boxplot),
type: 'box',
name: thissite,
boxpoints: false,
//// marker: {
// color: "red"
// }
};
holder[i] = eachtrace;
} // if not undefined s close
} //i loop close
var data = holder;
var layout = {
autosize: false,
width: 1000,
height: 500, //maybe make if varname.length == 1 {height = 800} or something
margin: {
l: 50,
r: 50,
b: 30,
t: 30,
pad: 4
},
title: {
text: var_name,
font: {
family: 'Arial',
size: 14 }
},
yaxis: {
title: 'Value'
}//, //HERE
//boxmode: 'group'
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout, {responsive: true});
return div;
} // not undefined var close
} // function close
box_Plot(varname)